<template>
    <div class="main-content plan-direct-detail-view">

        <el-form
                class="form-detail"
                label-position="right"
                label-width="150px"
                :inline="true"
        >

            <el-row :gutter="20" style="width:100%">

                <el-col :span="8">
                    <el-form-item label="产品通用名：">
                        {{ datas.planDetail?.productPopularName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="商品名：">
                        {{ datas.planDetail?.productName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="包装规格：">
                        {{ datas.planDetail?.packSpecs }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生产厂家：">
                        {{ datas.planDetail?.producer }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="产品属性：">
                        <span> {{ getLabel('product_attribute', datas.planInfo?.productAttribute) }}</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端价：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="priceClick"
                        >
                            {{ datas.planInfo?.terminalPrice }}元/{{ getLabel('sell_unit', datas.planInfo?.sellUnit) }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规划地区：">
                        <span v-if="datas.planDetail?.provinceName">{{
              datas.planDetail?.provinceName
            }}/{{ datas.planDetail?.cityName }}/{{ datas.planDetail?.areaName }}/{{ datas.planDetail?.streetName }}</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规划开发终端数量：">
                        {{ datas.planDetail?.devTerminalNum }} 家
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务期限：">
                        {{ dateFormat("yyyy-mm-dd", datas.planInfo?.expireTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="其他说明：">
                        <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
                        <span v-else>无</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="创建人：">
                        {{ datas.planDetail?.creatorName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务来源：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="onPlan"
                        >
                            {{ datas.planDetail?.detailNo }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="发布时间：">
                        {{ dateFormat('yyyy-mm-dd HH:MM',datas.planDetail?.createdAt) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allData.saleTask?.headId > 0">
                    <el-form-item label="完成职员" >
                        {{ allData.saleTask?.headName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allData.saleTask?.doneTime">
                    <el-form-item :label="allData.saleTask?.headId > 0 ? '完成时间：' : '结束时间：'" >
                        {{ dateFormat('yyyy-mm-dd HH:MM',allData.saleTask?.doneTime) }}
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

        <template v-if="allData.allocation && allData.allocation.length">
            <item-title title="分配跟进信息"/>

            <allocationView :datas="allData"/>
        </template>

    </div>

</template>

<script>
    import { defineComponent, defineAsyncComponent, reactive, toRefs } from 'vue'
    export default defineComponent({
        name: "directDetail",
        emits:['plan','price'],
        components:{
            allocationView:defineAsyncComponent(()=>import('./allocationView.vue'))
        },
        props:{
            datas:{
                type:Object,
                default:{}
            },
            allData:{
                type:Object,
                default:{}
            }
        },
        setup(props,{emit}){
            var data = reactive({
                priceDrawer:null,
            })

            const priceClick = () => {
                console.log(props.datas)
                emit('price')
            }

            const onPlan = () => {
                emit('plan')
            }

            return{
                ...toRefs(data),

                priceClick,
                onPlan,
            }
        }
    })
</script>

<style scoped>

</style>
